<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//CN">
<html>
  <head>
  
    
    <title>XML-TEST</title>
    
	<script type="text/javascript">
    var xmlHttp;
		
		/*创建XMLHttpRequest对象,接受xml或者字符串*/
		function createXMLHttpRequest() {
			if(window.ActiveXObject) {
		  		//IE
	  			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	  		} else {
	  			//chrome firefox opera 
	  			xmlHttp = new XMLHttpRequest();
	  		}
		}
		
  		function response(){
  			createXMLHttpRequest();
  			xmlHttp.onreadystatechange = callback;
  			xmlHttp.open("GET","province.jspx",true);
  			xmlHttp.send();
  		}
  		window.onload=response;
  		function callback(){
  			if(xmlHttp.readyState == 4) {
    				if(xmlHttp.status == 200) {
    					var xml = xmlHttp.responseXML;
    					
    					var provinces = xml.getElementsByTagName("provinces");
    					document.getElementById("province").options.length = 1;
    					for(var i = 0;i < provinces.length;i++) {
    						var province=provinces[i].getElementsByTagName("province");
    						var provinceName= province[0].childNodes[0].nodeValue
    						
    						var provinceId=provinces[i].getElementsByTagName("provinceId");
    						var provinceBH=provinceId[0].childNodes[0].nodeValue
    						//alert(types[i].childNodes[0].nodeValue);
    						var myOption = new Option(provinceName,provinceBH);
    						document.getElementById("province").options.add(myOption);
    						
    					}
    					
    				} else {
    					alert("Ajax Error!");
    				}
    			}
  		}
   </script>

  </head>
  
  <body >
   <select id="province">
   <option>--请选择省份--</option>
  	
   </select>
   <select id="city" >
      <option>--市--</option>
   </select>
   <script type="text/javascript">
   var xmlHttp;
		
		/*创建XMLHttpRequest对象,接受xml或者字符串*/
		function createXMLHttpRequest() {
			if(window.ActiveXObject) {
		  		//IE
	  			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	  		} else {
	  			//chrome firefox opera 
	  			xmlHttp = new XMLHttpRequest();
	  		}
		}
		
		document.getElementById("province").onchange=function(){
		    createXMLHttpRequest();
			var province =encodeURIComponent(document.getElementById("province").value);
  			xmlHttp.onreadystatechange = getXml;
  			xmlHttp.open("GET","city.jspx?province="+province,true);
  			xmlHttp.send();
		}
		function getXml(){
			if(xmlHttp.readyState == 4){
				if(xmlHttp.status==200){
				var xml = xmlHttp.responseXML;
				var citys=xml.getElementsByTagName("citys");
				 document.getElementById("city").options.length = 1;
				for(var i=0;i<citys.length;i++){
				   
				 	var city=citys[i].getElementsByTagName("city");
				 	var cityName=city[0].childNodes[0].nodeValue
				 	
				 	var cityId=citys[i].getElementsByTagName("cityId");
				 	var cityBH=cityId[0].childNodes[0].nodeValue;
				 	var myOption = new Option(cityName,myOption);
    				document.getElementById("city").options.add(myOption);
				 	
				}
				
				}else{
				
				alert("Ajax Error!")
				}
			}
		
		}
		
		
   </script>
  </body>
</html>
